<template>
  <bm-overlay
    class="appointsmaple"
    pane="labelPane"
    @draw="draw">
    <div class="appointUser">
      <img :src="user.photo">
      <span>{{user.name}}</span>      
    </div>
  </bm-overlay>
</template>
<script>
export default {
  props:['user', 'position'],
  methods:{
    draw ({el, BMap, map}) {
      const {lng, lat} = this.position
      const pixel = map.pointToOverlayPixel(new BMap.Point(lng, lat))
      el.style.left = pixel.x - 60 + 'px'
      el.style.top = pixel.y - 20 + 'px'
    }
  }
}
</script>
<style lang="less" scoped>
  @import "~less/base";
    .appointsmaple{
        position: absolute;
        .appointUser{
          position: relative;
          img{
            height: .8rem;
            border-radius: 50%;
            position: absolute;
            z-index: 1;
          }
          span{//名字
              position: absolute;
              left:.7rem;
              top: .15rem;
              background-color: @background-bg;
              padding: .1rem .2rem;
              border-radius: 1px;
              box-shadow: .01rem .01rem .02rem @color-m;              
          }
        }
    }
</style>
